/**
 * Created by Liya on 2016/7/4.
 */
import React from 'react';
import './style.less';


var KeyItem = React.createClass({


    render: function () {
        return(
            <div>

                     <span onClick={this.props.onClick} className="keyword_item"><b className="keyword_item_inner"> {this.props.item}</b>
                        <a href="javascript:void(0)" className="btn_keyword_del" ><span>x</span></a>
                  </span>

            </div>
        )

    }
});
let index=0
const markValue=[]
var MarkInput = React.createClass({
    getInitialState: function () {
        console.log("----------")
        markValue.length=0//清空
        const _itemBoxes=[]

        if( this.props.defaultItem!=undefined && this.props.defaultItem!=""){
            this.props.defaultItem.map((x,i)=>{
                _itemBoxes.push(x)
                markValue.push(x)
            })
        }
        console.log("22:",markValue)
        return { itemBoxes: _itemBoxes,second:false};
    },

    setItemBox:function(inputValue){

        if(inputValue.length>0){
            markValue.length=0
            this.state.itemBoxes.forEach((item,i)=>{
                    markValue.push(item)//获取已经输入值
            })

            var cbs = this.state.itemBoxes;
            let isExist=false;
            cbs.forEach(x=>{
                //如果是已将存在的关键字 忽略
                if(x==inputValue){
                    isExist=true
                }
            })

            if(!isExist){
                markValue.push(inputValue)
                cbs.push(inputValue);
            }

            this.setState({itemBoxes: cbs});
            index++
        }
    },
    renderKeyItem: function (event) {
        if(event.charCode==13){
            var inputValue=event.target.value;
            this.setItemBox(inputValue)
            event.target.value=""//清空输入框

        }


    },
    deleteItem:function(index){
        markValue.length=0
        const temp=[]
        this.state.itemBoxes.forEach((item,i)=>{
            if(i!=index){
                temp.push(item)
                markValue.push(item)
            }
        })
        this.setState({itemBoxes:temp})
    },
    inputBlur:function(event){
        var inputValue=event.target.value;
        this.setItemBox(inputValue)
        event.target.value=""//清空输入框

    },
    keyWordBoxClick:function(e){
        //点击keybox input 获得焦点
        e.preventDefault();
        this.refs.theInput.focus()

        

    },
    render: function() {
        return <div>
            <div className="keyWord" onClick={this.keyWordBoxClick} ref="myExample">
                {this.state.itemBoxes.map((x,index)=>{
                    return   <KeyItem  item={x} key={index} onClick={this.deleteItem.bind(this,index)}></KeyItem>
                })}
                <span className="keyword_input">
                    <input type="text" className="input_inner" ref="theInput"  onKeyPress = {this.renderKeyItem} onBlur={this.inputBlur}   />
                </span>
               
            </div>
        </div>;
    }
});

function getMarkValue(){
    console.log("mar:",markValue)
    return markValue
}
export default{
    MarkInput,
    getMarkValue
}